﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>新建页效果</title>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/page.js"></script>
<script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<div id="setWrap">
    <div class="setUp"></div>
    <div class="setList">
    	<div class="setListTop"></div>
        <div class="setListCen">
        	<dl id="bgList">
                <dt>背景</dt>
                <dd><img src="img/bg1.jpg"/></dd>
                <dd><img src="img/bg2.jpg"/></dd>
                <dd><img src="img/bg3.jpg"/></dd>
                <dd><img src="img/bg4.jpg"/></dd>
                <dd><img src="img/bg5.jpg"/></dd>
                <dd><img src="img/bg6.jpg"/></dd>
            </dl>
            <dl id="setNum">
            	<dt>格子数</dt>
            	<dd>0</dd>
            	<dd>4</dd>
                <dd>8</dd>
                <dd class="active" style="border-right:1px solid #bcbfc3;">12</dd>
            </dl>
            <p class="change">窗口图片位置随机交换</p>
        </div>
        <div class="setListBot"></div>
    </div>
</div>



<div id='main'>
	<div id="sWrap">
        <div class="search">
            <span><a href="#">百度</a></span><input type="text" id="text"/><input type="button" id="btn"/>
        </div>
        <ul id="result"></ul>
    </div>
    <ul id="pic">
   </ul>
</div >
<div id="work"></div>
<div id="mask"></div>
<div id="wMenu">
	<div class="list">
        <dl>
            <dt><a href="#" target="_blank">1.模仿360新建页制作JS效果</a></dt>
            <dd>a)用JsonP跨域请求百度数据，制作搜索框；</dd>
            <dd>b)用Ajax制作天气预报效果；</dd>
            <dd>c)制作更换背景功能，并记录cookie；</dd>
            <dd>d)动态设置图片格子数，并记录cookie；</dd>
            <dd>e)图片可任意交换位置，可随机交换位置；</dd>
            <dd>f)制作图片格子内部轮播图效果。</dd>
        </dl>
        <dl>
            <dt><a href="others/b.qq/index.html" target="_blank">2.模仿企业QQ整站</a></dt>
            <dd>a)标签的选择方面，注重标签的语义化</dd>
            <dd>b)CSS命名方面，运用加前缀的方法区分样式所属页面、避免冲突；</dd>
            <dd>c)CSS样式规划方面，考虑扩展性，多用组合，少用继承。</dd>
            <dd>e)处理各浏览器的兼容问题，兼容IE6~10，firefox，chrome等。</dd>
        </dl>
        <dl>
            <dt><a href="others/UC/index.html" target="_blank">3.模仿UC首页</a></dt>
            <dd>a)用JS原生实现首页所有效果</dd>
            <dd>b)用运动框架制作首页轮播图、网站地图以及下拉菜单</dd>
        </dl>
        <dl>
            <dt>4.零散demo</dt>
            <dd><a href="others/magnifier/index.html" target="_blank">a)放大镜效果；</a></dd>
            <dd><a href="others/jumpMenu/index.html" target="_blank">b)可拖拽弹性跳动窗口；</a></dd>
            <dd><a href="others/appleMenu/index.html" target="_blank">c)苹果菜单效果</a></dd>
            <dd><a href="others/movingPic/1.html" target="_blank">d)常见轮播图效果合集</a></dd>
			<dd><a href="others/delay/delay.html" target="_blank">e)延迟加载效果</a></dd>
        </dl>
        <p>说明：此网站内各模仿页面仅用来展示个人作品，不用于任何商业用途</p>
        <div class="close"></div>
    </div>
</div>
</body>
</html>
